<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jQuery UI Droppable - SVG</title>
<link rel="stylesheet" href="./themes/base/jquery.ui.all.css">
<script src="./js/jquery-1.7.1.min.js"></script>
<script src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery.svg.js"></script>
<script type="text/javascript" src="./js/jquery.svgdom.js"></script>
<script type="text/javascript" src="./js/jquery.svganim.js"></script>
<script type="text/javascript" src="./js/jquery.cookie.js"></script>

<link rel="stylesheet" href="./themes/demos.css">
<style>
#gallery {
	float: left;
	width: 100%;
	min-height: 12em;
}

* html #gallery {
	height: 12em;
} /* IE6 */
.gallery.custom-state-active {
	background: #eee;
}

.gallery div {
	float: left;
	
	/*padding: 0.4em;
	margin: 0 0.4em 0.4em 0;*/
}
.ui-widget-content {
	/*  esto le agregué en DG */
	width: 30%;
	padding: 5px;
	margin: 10px;
	text-align: left;
	background-color:#ABB2B2;
	background: -webkit-gradient(linear, left top, left bottom, from(#ABB2B2), to(#E6E6E6) );
	background: -webkit-linear-gradient(#ABB2B2, #E6E6E6);
	background: -moz-linear-gradient(center top, #ABB2B2 0%, #E6E6E6 100%);
	background: -moz-gradient(center top, #ABB2B2 0%, #E6E6E6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ABB2B2, endColorstr=#E6E6E6 );
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ABB2B2,endColorstr=#E6E6E6)";
	height: 50%;
	border: 1px solid;
	border-color: #fff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
	-o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}

.gallery div h5 {
	cursor: move;
	/*  esto le agregué en DG */
	font-size: 12px;
	background:none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.4em;
	margin-left: 0;
	padding: 10px;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: double;
	border-left-style: none;
	border-bottom-color: #E6E6E6;
}
.ui-dialog-titlebar {
	background:none;
	border:none;
}
.gallery div a {
	float: right;
}

.gallery div a.ui-icon-zoomin {
	
}

.gallery div img {
	width: 100%;
	cursor: move;
}

#trash {
	float: bottom;
	width: 95%;
	min-height: 10em;
	padding: 1%;
}

* html #trash {
	height: 10em;
} /* IE6 */
#trash h4 {
	line-height: 16px;
	margin: 0 0 0.4em;
}

#trash h4 .ui-icon {
}
.gallery .svgcanvas {
	background-color: #FFFFFF;
	margin: 5px;
	width:97%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#trash .gallery .svgcanvas {
	display: none;
	width: 150px;
	height: 0px;
}

#trash .gallery .ui-widget-content {
width: 150px;
height: 50px;
}

#dialogDiv {
	display: block;
    margin-left: auto;
    margin-right: auto
}
</style>
<script>
	

	// Variables que pueden ser editadas
	// Ancho destino de las miniaturas
	var svgThumbWidth = screen.width / 3;
	// Alto destino de las miniaturas
	var svgThumbHeigth = (screen.height / 4) - 20;
	// Duracion de la cookie (dias)
	var setCookieExpiry = 7;
	// Fin variables
	
	var setSelector = "#gallery";
	var setCookieName = "galleryOrder";
	var restoring = false;
	
	var originalWidth = [];
	var originalHeight = [];
	var actualWidth = [];
	var actualHeight = [];
	
	var svgWidth = [];
	var svgHeight = [];
	
	// Funcion que salva el estado de la galeria en la cookie
	function saveOrder() {
		if (restoring) {return;	}
		$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
	}
	
	$(function() {	
		$('.gallery .svgcanvas').css('height', (screen.height / 4) - 25);
		// Galeria y trash
		var $gallery = $("#gallery"), $trash = $("#trash");
		$gallery.sortable({update: function() { saveOrder(); }});

		// Funcion que restaura los items de la galeria de la cookie
		function restoreOrder() {
			restoring = true;
			var list = $(setSelector);
			if (list == null) return;
			// fetch the cookie value (saved order)
			var cookie = $.cookie(setCookieName);
			if (!cookie) return;
			// make array from saved order
			var IDs = cookie.split(",");
			// fetch current order
			var items = list.sortable("toArray");
			// make array from current order
			var rebuild = new Array();
			for ( var v=0, len=items.length; v<len; v++) {
				rebuild[items[v]] = items[v];
			}
			for (var i = 0, n = items.length; i < n; i++) {
				// item id from saved order
				var itemID = items[i];
				deleteImage($("#" + itemID));
			}
			for (var i = 0, n = IDs.length; i < n; i++) {
				// item id from saved order
				var itemID = IDs[i];
				recycleImage($("#" + itemID));
			}
			restoring = false;
		}
		
		// Funcion que quita un svg de la galeria
		function deleteImage($item) {
			if (actualWidth[$item.prop("id")]) {
				// resize
				$item.css('width', 150);
				$item.css('height', 50);
			}
			$item.resizable( "option", "disabled", true );
			
			if (!$item.attr('closed') || $item.attr('closed') == '0') {
				var $list = $("div", $trash).length ? $("div", $trash)[0] : $(
						"<div class='gallery ui-helper-reset'/>").appendTo($trash);
				$item.appendTo($list);
				$item.attr('closed', '1');
				saveOrder();
			}
		}

		// Funcion que vuelve un svg a la galeria
		function recycleImage($item) {
			$item.appendTo($gallery);
			$item.attr('closed', '0');
			$item.resizable( "option", "disabled", false);
			saveOrder();
		}

		// Imagen que muestra un svg en su tamaño original
		// Si esta minimizado, lo vuelve a la lista de visibles
		function viewLargerImage($item, $link) {
			if (!$item.attr('closed') || $item.attr('closed') == '0') {
				$('#dialogDiv').svg();
				var svg = $("#dialogDiv").svg('get');
				svg.load($link.attr("href"), {
					addTo : true,
					changeSize : true
				});
				var x = (screen.width / 2) - (svgWidth[$link.attr("href")] / 2);
				if (x < 0) {
					x = 0;
				}
				$('#dialogContainer').dialog('option', 'position', [x,0]);
				$('#dialogContainer').dialog("option" , "title" , $link.attr("title"));
				$("#dialogContainer").dialog("open");
				return;
			} else {
				if (actualWidth[$item.prop("id")]) {
					// resize
					$item.css('width', actualWidth[$item.prop("id")]);
					$item.css('height', actualHeight[$item.prop("id")]);
				}
				recycleImage($item);
			}
		}

		// Funcion que maneja el onlick de los iconos
		$("div.gallery > div").click(function(event) {
			var $item = $(this), $target = $(event.target);
			if ($target.is("a.ui-icon-trash")) {
				deleteImage($item);
			} else if ($target.is("a.ui-icon-zoomin")) {
				// si esta normal, agrando, si esta min, vuelvo al panel
				viewLargerImage($item, $target);
			} else if ($target.is("a.ui-icon-refresh")) {
				recycleImage($item);
			}
			return false;
		});

		restoring = true;
		
		// seccion de carga de los svgs
		loadSVG($("#div00"), $("#canvas00"), './svg/gfloppy.svg');
		loadSVG($("#div01"), $("#canvas01"), './svg/antenna.svg');
		loadSVG($("#div02"), $("#canvas02"), './svg/penguin.svg');
		loadSVG($("#div03"), $("#canvas03"), './svg/laptop.svg');
		loadSVG($("#div04"), $("#canvas04"), './svg/modem.svg');
		loadSVG($("#div05"), $("#canvas05"), './svg/monitor.svg');
		loadSVG($("#div07"), $("#canvas07"), './svg/Subtes-2008.svg');

		// ejemplo de svg inicialmente borrado
		deleteImage($("#div07"));
		
		restoring = false;
		// recarga de estado desde la cookie
		restoreOrder();
		restoring = false;
		
		// dialogo que mostrara el svg en tamaño original en un nuevo layer
		$(function() {
			$("#dialogContainer").dialog({
				title : 'Some title',
				resizable : false,
				position: 'center',
				bgiframe : true,
				overlay : {
					opacity : 0.8,
					background : "#000"
				},
				autoOpen : false,
				height : 'auto',
				width : 'auto',
				modal : true,
				close : function(event, ui) {
					$('#dialogDiv').svg('destroy');
				}
			});
		});
	});

	// Funcion que carga el svg
	function loadSVG(containerDiv, divObj, svgUrl) {
		divObj.svg({
			onLoad : function() {
				var svg = divObj.svg('get');
				svg.load(svgUrl, {
					addTo : true,
					changeSize : true,
					onLoad : function() {
						scale(divObj,svgUrl);
					}
				});
			}
		});
		containerDiv.resizable({ alsoResize: '#' + divObj.prop("id") });
		containerDiv.resize(function(ev,ui){
			var elem = $(this);    
			originalWidth[containerDiv.prop("id")] = ui.originalSize.width;
			originalHeight[containerDiv.prop("id")] = ui.originalSize.height;
			
			actualWidth[containerDiv.prop("id")] = ui.size.width;
			actualHeight[containerDiv.prop("id")] = ui.size.height;
			
			rescale(divObj, elem.width() - 15, elem.height() - 50);
		  });
	}
	
	// Funcion que escala un svg cargado usando como destino svgThumbWidth y svgThumbHeight
	function scale(objCanvas, svgUrl) {
		var svg = objCanvas.svg('get');
		var g = $('g', svg.root())[0];
		svg._svg.width.baseVal.convertToSpecifiedUnits(5);
		svg._svg.height.baseVal.convertToSpecifiedUnits(5);
		var widthPX = svg._svg.width.baseVal.valueInSpecifiedUnits;
		var heightPX = svg._svg.height.baseVal.valueInSpecifiedUnits;
		svgWidth[svgUrl] = widthPX;
		svgHeight[svgUrl] = widthPX;
		var scalew = svgThumbWidth / widthPX;
		var scaleh = svgThumbHeigth / heightPX;
		var scale = 0;
		if (scalew < scaleh) {
			scale = scalew;
		} else {
			scale = scaleh;
		}
		g.setAttribute('transform', 'scale(' + scale + ')');
	}
	
	function rescale(objCanvas, width, height) {
		var svg = objCanvas.svg('get');
		var g = $('g', svg.root())[0];
		svg._svg.width.baseVal.convertToSpecifiedUnits(5);
		svg._svg.height.baseVal.convertToSpecifiedUnits(5);
		var widthPX = svg._svg.width.baseVal.valueInSpecifiedUnits;
		var heightPX = svg._svg.height.baseVal.valueInSpecifiedUnits;
		var scalew = width / widthPX;
		var scaleh = height / heightPX;
		var scale = 0;
		if (scalew < scaleh) {
			scale = scalew;
		} else {
			scale = scaleh;
		}
		g.setAttribute('transform', 'scale(' + scale + ')');
	}
</script>
</head>
<body>
	<div class="demo ui-widget ui-helper-clearfix">

		<!-- Inicio de la galeria -->
		<div id="gallery" class="gallery ui-helper-reset ui-helper-clearfix ui-droppable">
			
			<!-- Contenedor del svg -->
			<div class="ui-widget-content ui-corner-tr " id="div00">
				<h5 class="ui-widget-header">
					Floppy 
						<a href="#" title="Delete this image" class="ui-icon ui-icon-trash"></a>
						<a href="./svg/gfloppy.svg" title="Floppy" class="ui-icon ui-icon-zoomin"></a>
				</h5>
				<div id="canvas00" class="svgcanvas"></div>
			</div>

			<div class="ui-widget-content ui-corner-tr " id="div01">
				<h5 class="ui-widget-header">Antenna
					<a href="#" title="Delete this image" class="ui-icon ui-icon-trash"></a>
					<a href="./svg/antenna.svg" title="Antenna" class="ui-icon ui-icon-zoomin"></a>
				</h5>
				<div id="canvas01" class="svgcanvas"></div>
			</div>

			<div class="ui-widget-content ui-corner-tr " id="div02">
				<h5 class="ui-widget-header">Penguin
					<a href="#" title="Delete this image" class="ui-icon ui-icon-trash"></a>
					<a href="./svg/penguin.svg" title="Penguin" class="ui-icon ui-icon-zoomin"></a>
				</h5>
				<div id="canvas02" class="svgcanvas"></div>
			</div>

			<div class="ui-widget-content ui-corner-tr " id="div03">
				<h5 class="ui-widget-header">Laptop
					<a href="#" title="Delete this image" class="ui-icon ui-icon-trash"></a>
					<a href="./svg/laptop.svg" title="Laptop" class="ui-icon ui-icon-zoomin"></a>
				</h5>
				<div id="canvas03" class="svgcanvas"></div>
			</div>

			<div class="ui-widget-content ui-corner-tr " id="div04">
				<h5 class="ui-widget-header">Modem
					<a href="#" title="Delete this image" class="ui-icon ui-icon-trash"></a>
					<a href="./svg/modem.svg" title="Modem" class="ui-icon ui-icon-zoomin"></a>
				</h5>
				<div id="canvas04" class="svgcanvas"></div>
			</div>

			<div class="ui-widget-content ui-corner-tr " id="div05">
				<h5 class="ui-widget-header">Monitor
					<a href="#" title="Delete this image" class="ui-icon ui-icon-trash"></a>
					<a href="./svg/monitor.svg" title="Monitor" class="ui-icon ui-icon-zoomin"></a>
				</h5>
				<div id="canvas05" class="svgcanvas"></div>
			</div>

			<div class="ui-widget-content ui-corner-tr " id="div07">
				<h5 class="ui-widget-header">Subtes
					<a href="#" title="Delete this image" class="ui-icon ui-icon-trash"></a>
					<a href="./svg/Subtes-2008.svg" title="Subtes" class="ui-icon ui-icon-zoomin"></a>
				</h5>
				<div id="canvas07" class="svgcanvas"></div>
			</div>

		</div>

	</div>
	<!-- End demo -->

	<div id="trash" class="ui-widget-content ui-state-default ui-droppable">
		
	</div>

	<!--div class="demo-description">
		Los svg tienen que tener un tag	<g> agrupandolos, de lo contrario no pueden ser escalados.<br>
		Falta la aplicacion de la grafica. 
	</div-->
<!-- End demo-description -->


	<div id="dialogContainer" title="Basic dialog">
		<center>
		<div id="dialogDiv"></div>
		</center>
	</div>

</body>
</html>
